<template>
  <div class="social-card">
    <div class="card-header">
      <h3>社交网络分析</h3>
      <el-tag size="small" type="info">关系网络</el-tag>
    </div>
    <div class="card-content">
      <div class="network-chart" ref="networkChart"></div>
      <div class="social-metrics">
        <h4>社交活跃度分析</h4>
        <div class="metrics-grid">
          <div class="metric-item">
            <div class="metric-header">
              <el-icon><User /></el-icon>
              <span>研究小组交流</span>
            </div>
            <div class="metric-progress">
              <div class="progress-bar">
                <div class="progress" :style="{ width: '85%' }"></div>
              </div>
              <span class="value">85%</span>
            </div>
          </div>
          <div class="metric-item">
            <div class="metric-header">
              <el-icon><Operation /></el-icon>
              <span>学术活动参与</span>
            </div>
            <div class="metric-progress">
              <div class="progress-bar">
                <div class="progress" :style="{ width: '78%' }"></div>
              </div>
              <span class="value">78%</span>
            </div>
          </div>
          <div class="metric-item">
            <div class="metric-header">
              <el-icon><Reading /></el-icon>
              <span>社团活动</span>
            </div>
            <div class="metric-progress">
              <div class="progress-bar">
                <div class="progress" :style="{ width: '92%' }"></div>
              </div>
              <span class="value">92%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="interaction-analysis">
        <h4>互动质量评估</h4>
        <div class="interaction-stats">
          <div class="stat-item">
            <div class="icon-wrapper">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-content">
              <span class="value">24</span>
              <span class="label">核心互动圈</span>
            </div>
          </div>
          <div class="stat-item">
            <div class="icon-wrapper">
              <el-icon><Operation /></el-icon>
            </div>
            <div class="stat-content">
              <span class="value">85%</span>
              <span class="label">互动质量</span>
            </div>
          </div>
          <div class="stat-item">
            <div class="icon-wrapper">
              <el-icon><Reading /></el-icon>
            </div>
            <div class="stat-content">
              <span class="value">12</span>
              <span class="label">活动参与</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { User, Operation, Reading } from '@element-plus/icons-vue'

const networkChart = ref(null)

onMounted(() => {
  const chart = echarts.init(networkChart.value)
  const option = {
    backgroundColor: 'transparent',
    tooltip: {},
    series: [{
      name: '社交网络',
      type: 'graph',
      layout: 'force',
      data: [
        { name: '自己', value: 40, category: 0, symbolSize: 50 },
        { name: '研究组', value: 30, category: 1, symbolSize: 40 },
        { name: '社团', value: 30, category: 1, symbolSize: 40 },
        { name: '学术圈', value: 30, category: 2, symbolSize: 40 },
        { name: '项目组', value: 30, category: 2, symbolSize: 40 },
        { name: '同学A', value: 20, category: 3, symbolSize: 30 },
        { name: '同学B', value: 20, category: 3, symbolSize: 30 },
        { name: '导师', value: 20, category: 4, symbolSize: 30 }
      ],
      links: [
        { source: '自己', target: '研究组', value: 5 },
        { source: '自己', target: '社团', value: 3 },
        { source: '自己', target: '学术圈', value: 4 },
        { source: '自己', target: '项目组', value: 4 },
        { source: '自己', target: '同学A', value: 2 },
        { source: '自己', target: '同学B', value: 2 },
        { source: '自己', target: '导师', value: 3 },
        { source: '研究组', target: '学术圈', value: 3 },
        { source: '社团', target: '项目组', value: 2 }
      ],
      categories: [
        { name: '核心' },
        { name: '组织' },
        { name: '活动' },
        { name: '同学' },
        { name: '导师' }
      ],
      roam: true,
      label: {
        show: true,
        position: 'right',
        color: '#fff',
        fontSize: 12
      },
      force: {
        repulsion: 100,
        edgeLength: [80, 120]
      },
      emphasis: {
        focus: 'adjacency'
      },
      itemStyle: {
        color: function(params) {
          const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
          return colors[params.data.category];
        }
      },
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.2)',
        curveness: 0.3,
        width: 2
      }
    }]
  }
  chart.setOption(option)
})
</script>

<style lang="less" scoped>
.social-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    h3 {
      color: #fff;
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .network-chart {
      height: 260px;
      margin-bottom: 10px;
    }

    .social-metrics {
      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: #909399;
        }
      }

      .metrics-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .metric-item {
          background: rgba(255, 255, 255, 0.05);
          padding: 12px;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }

          .metric-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;

            .el-icon {
              font-size: 18px;
              color: #909399;
            }

            span {
              color: #fff;
              font-size: 14px;
            }
          }

          .metric-progress {
            display: flex;
            align-items: center;
            gap: 10px;

            .progress-bar {
              flex: 1;
              height: 4px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 2px;
              overflow: hidden;

              .progress {
                height: 100%;
                background: linear-gradient(90deg, #909399, #409EFF);
                border-radius: 2px;
                transition: width 0.3s ease;
              }
            }

            .value {
              color: #909399;
              font-size: 12px;
              min-width: 35px;
              text-align: right;
            }
          }
        }
      }
    }

    .interaction-analysis {
      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: #909399;
        }
      }

      .interaction-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;

        .stat-item {
          background: rgba(255, 255, 255, 0.05);
          padding: 12px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 12px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }

          .icon-wrapper {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(144, 147, 153, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;

            .el-icon {
              font-size: 20px;
              color: #909399;
            }
          }

          .stat-content {
            display: flex;
            flex-direction: column;

            .value {
              color: #fff;
              font-size: 18px;
              font-weight: 500;
              line-height: 1;
              margin-bottom: 4px;
            }

            .label {
              color: rgba(255, 255, 255, 0.7);
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style> 